<template>
  <el-select class="dp-selector" v-model="path" :popper-append-to-body="false" @change="onChange">
    <el-option v-for="(op, i) of list" :key="i" :value="op.path" :label="op.name" />
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      path: '',
      list: [
        { name: '农场数字地图', path: '/dp/digital-map', alias: '/dashboard' },
        { name: '农场实时监控', path: '/dp/monitor' },
        // { name: '农场作业监控', path: '/dp/work-monitor' },
        { name: '农机大数据平台', path: '/dp/D1' },
        // { name: '农机监控中心', path: '/dp/device-map' },
        { name: '农场大数据监控', path: '/dp/D2' }
        // { name: '农情监测设备总览', path: '/dp/device-overview' }
      ]
    }
  },
  methods: {
    onChange(ev) {
      this.$router.push(ev)
    }
  },
  mounted() {
    const match = this.list.find(op => location.pathname === op.path || location.pathname === op.alias)
    this.path = match ? match.path : ''
  }
}
</script>

<style lang="scss" scoped>
.dp-selector {
  position: fixed;
  z-index: 99;
  top: 24px;
  left: 400px;

  >>> .el-input__inner {
    background: #000429;
    color: white;
    width: 0;
  }

  >>> .el-select-dropdown {
    background: #000429;

    .el-select-dropdown__item {
      color: white;
      &.hover,
      &.selected {
        background: #053f98;
      }
    }
  }
}
</style>
